<template>
  <div>
    <Row>
        <Col span="17" offset="3">
        	<div class="zss_fxcontent">
        		<Col span="7">
        			<div class="zss_left">
        				<div class="zss_top">
        					<Dropdown>
						        <p class="zss_xlt">
						            所有分享
						            <Icon type="arrow-down-b"></Icon>
						        </p>
						        <DropdownMenu slot="list">
						            <DropdownItem>所有分享</DropdownItem>
						            <DropdownItem>我的分享</DropdownItem>
						        </DropdownMenu>
						    </Dropdown>
							<div class="zss_topright">
								<Icon type="plus-circled"></Icon>
								添加分享
							</div>
        				</div>

    					<ul>
    						<li v-for="(item,index) in items" class="zss_fxli" :class="{dj:nowindex===index}" @click="dj(index)">
    							<div class="demo-avatar" style="float:left;padding-top:5px">
							        <Avatar style="background: rgb(255, 191, 0);">{{ item.name }}</Avatar>
							    </div>
								<div style="float:left;padding-left:10px">
									<p>{{item.title}}</p>
									<p style="color:#BDBDBD">{{item.name}}发布于{{item.time}}</p>
								</div>
    						</li>
    					</ul>
        				
        			</div>
        		</Col>
        		<Col span="15">
        			<div class="zss_right">
        				分享详情信息
        			</div>
        		</Col>
        	</div>
        </Col>
    </Row>
  </div>
</template>
<script>
  export default {  
  	name: '分享',
    data(){
    	return{
    		items:[
    			{name:'绍帅',title:'我的项目心得',time:'2018-02-12 15:18'},
    			{name:'占刚',title:'vue学习',time:'2018-02-18 10:32'},
    			{name:'家宏',title:'教学诊改',time:'2018-03-05 09:55'},
    			{name:'周强',title:'教学诊改平台搭建',time:'2018-03-15 14:55'}
    		],
    		nowindex:0
    	}
    },
    methods:{
    	dj (index){
			this.nowindex = index
		}
    }
  }
</script>
<style lang="less">
	.zss_fxcontent{
		border:1px solid #EBEBEB;
		border-radius: 5px;
		margin:15px 0;
		background: white;
		overflow: auto;
		height: calc(100vh - 21px);
		.zss_left{
			border-right:1px solid #E1E1E1;
			height: calc(100vh - 22px);
			overflow: auto;
			.zss_xlt{
				font-size: 16px;
				cursor: pointer;
			}
			.zss_top{
				overflow: hidden;
				padding:20px 10px;
				border-bottom: 1px solid #EBEBEB;
			}
			.zss_topright{
				float: right;
				cursor: pointer;
				color: #3da8f5;
				font-size: 16px;
			}
			.zss_fxli{
				overflow: hidden;
				border-bottom: 1px solid #EBEBEB;
				padding:20px 10px;
				cursor:pointer;
				transition: all 0.3s;
			}
			.zss_fxli:hover{
				background: #F1F1F1;
			}

			.dj{
				background: #F1F1F1;
			}
		}
		.zss_right{
			padding:10px;
			height: calc(100vh - 22px);
			overflow: auto;
		}

	}
</style>
